<template>
<!--  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button> -->

  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="35%"
    :before-close="handleClose"
  >
    
	<el-form :model="ruleFroms" label-width="120px">
	<el-form-item label="分类名称" prop="name">
	<el-input v-model="ruleFroms.name" />
	</el-form-item> 
	</el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addCategory">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script  setup>
import { reactive,toRefs,watch,inject} from 'vue'
import axios from "@/api/api_config"
import { ElMessage } from 'element-plus'
// import { ElMessageBox } from 'element-plus'

//-----------
const props = defineProps({
	dialogTitle:{type:String},
	tableRow:{type:Object}
})
const reload=inject("getList")
const state = reactive({
	dialogVisible:false,
	ruleFroms:{
		id:"",
		name:""
	}
})
//侦听器
watch(
//需要监控的数据
()=>props.tableRow,
//检测到变化后需要做的事情
()=>{
	state.ruleFroms=props.tableRow
},
//配置
{deep:true,immediate:true}
)
//----------------------------
//打开对话框
const dialogCategory=()=>{
  state.dialogVisible=true
}

//提交修改或者添加
const addCategory=()=>{
	if(props.dialogTitle ==="添加分类")
	{
		let param={
			name:ruleFroms.value.name//state.ruleFroms.name
		}
		axios.post("/Category",param).then(()=>{
			ElMessage.success("添加成功")
			state.dialogVisible=false//关闭窗口
			reload()
		})
	}else{
		let param={
			id:props.tableRow.id,//主窗口传过来的数据
			name:ruleFroms.value.name//state.ruleFroms.name
		}
		axios.put("/Category",param).then(()=>{
			ElMessage.success("修改成功")
			state.dialogVisible=false//关闭窗口
			reload()
		})
	}
}


//解构
const {dialogVisible,ruleFroms} =toRefs(state)//转ref 不需要.value


//主被暴露子组件方法,编译器的宏命令，不需要引入
defineExpose({dialogCategory})//‌defineExpose‌是Vue 3中用于在子组件中暴露属性和方法给父组件的一个内置函数。

// const dialogVisible = ref(false)

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }
</script>